// 采用 bem 架构
// app namespace
@namespace: vt;

// block selector section
@block-sel: "-";

// element selector section
@element-sel: "__";

// modifier selector section
@modifier-sel: "--";

.bem(@block, @element: false, @modifier: false) {
  @class: ~"@{namespace}@{block-sel}@{block}";

  // 添加 Element 类名
  .element() when (@element) {
    @class: ~"@{class}@{element-sel}@{element}";
  }

  // 添加 Modifier 类名
  .modifier() when (@modifier) {
    @class: ~"@{class}@{modifier-sel}@{modifier}";
  }

  // 输出类名和样式
  .@{class} {
    .element();
    .modifier();
  }
}
